<template>
  <!-- 通知FormItem做校验 -->
  <div class="my-input-container">
    <input class="my-input" :style="{'text-align': textAlign}" :type="type" :maxlength="maxlength" :value="value" @blur="onBlur" @input="onInput" :placeholder="placeholder" />
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'text',
    },
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: 'text',
    },
    textAlign: {
      type: String,
      default: 'left',
    },
    maxlength: {
      type: [String, Number],
      default: 99999,
    }
  },
  methods: {
    onInput(e) {
      // 通知父组件发生了input
      this.$emit('input', e.target.value)
      // 通知FormItem校验
      if (this.$parent.$props.useInput) {
        this.$parent.$emit('validate')
      }
    },
    onBlur() {
      this.$parent.$emit('validate')
    },
  },
}
</script>

<style lang="scss" scoped>
.my-input-container {
  flex: 1;
  input {
    width: 100%;
    font-size: 0.28rem;
    line-height: 0.88rem;
    background-color: transparent;
  }
}
</style>
